<!--
 * Description: 估价转发功能
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/05/27 16:28
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="120px" :model="formData" size="mini">
      <el-row>
        <!--行号-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.NO')">
            <span>{{ currentRowNo }}</span>
          </el-form-item>
        </el-col>

        <!--GCM Function-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.gcmFunction')">
            <span>{{ formData.gcmFunction }}</span>
          </el-form-item>
        </el-col>

        <!--Base Cost-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.baseCost')">
            <span>{{ formData.baseCost || 0 }}</span>
          </el-form-item>
        </el-col>

        <!--commodity-->
        <el-col :span="24">
          <el-form-item :label="$t('FdData.commodity')">
            <el-select
              v-model="formData.commodity"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in $store.getters['commodity/getCommodityCollectsByGcmFunction'](
                  formData.gcmFunction
                )"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
                <span style="float: left;">{{ item.name }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--转发人员-->
        <el-col :span="24">
          <el-form-item :label="$t('FdData.gcmOwner')">
            <el-select
              v-model="gcmOwner"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in gcmList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction + ' ' + item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item>
            <el-alert
              :closable="false"
              show-icon
              title="转发后 GCM Total Cost Delta 将会清空"
              type="warning"
            ></el-alert>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">{{ $t('button.save') }}</el-button>
    </span>
  </div>
</template>

<script>
import { rfqCostForward } from '@/api/rfq/rfq'

export default {
  name: 'RfqClaimEditForward',
  props: {
    inputData: {
      type: Object,
      default() {
        return {}
      }
    },
    taskData: {
      type: Object,
      default: () => null
    },
    currentRowNo: {
      type: Number,
      default: 0
    },
    gcmOwnerCommodityMp: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {},
      gcmOwner: ''
    }
  },
  computed: {
    gcmList() {
      const gcmFunction = this.$store.getters['post/getSessionPost'].gcmFunction
      const userId = this.$store.getters['user/getSessionUser'].userId
      const temp = this.$store.getters['user/getUserSimpleCollectsByGcmFunction'](gcmFunction)
      return temp.filter(item => item.userId !== userId)
    }
  },
  created() {
    this.pageDataInit()
  },
  methods: {
    pageDataInit() {
      // 将props传入的值复制给formData的值
      this.formData = this.$deepCopy(this.inputData)
    },
    async save() {
      try {
        await rfqCostForward(
          {
            rfqId: this.taskData.rfqId,
            rfqRowId: this.formData.rfqRowId,
            taskId: this.taskData.taskId,
            targetOwner: this.gcmOwner,
            commodity: this.formData.commodity,
            version: this.taskData.version
          },
          { msgSuccess: true, msgError: true }
        )
        this.$emit('save', this.formData)
      } catch (error) {
        console.log(error)
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.el-form-item__content span {
  margin-left: 5px;
  color: blue;
}
</style>
